<template>
	<view class="">
		<view class="form-body">
			<u-form labelPosition="left" :model="formData" :rules="rules" ref="form" labelWidth="auto"
				errorType="toast">
				<u-form-item label="卡项用途" borderBottom>
					<view class="flex justify-end">
						<view class="">
							<u-radio-group v-model="formData.purpose" placement="row">
								<u-radio activeColor="#fa436a" :name="1" label="售卖卡"></u-radio>
								<u-radio activeColor="#fa436a" :name="2" label="体验卡"></u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="分享主图" borderBottom>
					<view class="flex justify-end">
						<view class="">
							<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple
								:maxCount="1"></u-upload>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="卡项标题" prop="name" borderBottom>
					<u-input v-model="formData.name" border="none" placeholder="建议输入12字以内" inputAlign="right"></u-input>
				</u-form-item>
				<u-form-item label="项目状态" borderBottom>
					<view class="flex justify-end">
						<view class="">
							<u-radio-group v-model="formData.status" placement="row">
								<u-radio activeColor="#fa436a" :name="0" label="正常"></u-radio>
								<u-radio activeColor="#fa436a" :name="1" label="下架"></u-radio>
								<u-radio activeColor="#fa436a" :name="2" label="售罄"></u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="有效天数" prop="validDays" borderBottom>
					<view class="flex align-center">
						<u-input v-model="formData.validDays" border="none" inputAlign="right" type="number"></u-input>
						<text class="ml-10">天</text>
					</view>
				</u-form-item>
				<u-form-item label="售卖价格" prop="salePrice" borderBottom>
					<u-input v-model="formData.salePrice" border="none" inputAlign="right" type="number"></u-input>
				</u-form-item>
				<u-form-item label="销售提成" borderBottom>
					<view class="flex">
						<view class="">
							<u-input v-model="formData.salePercentage" type="number" border="none" placeholder="请输入数字"
								inputAlign="right"></u-input>
						</view>
						<u-radio-group v-model="formData.salePercentageType" placement="row">
							<u-radio activeColor="#fa436a" :name="2" label="元"></u-radio>
							<u-radio activeColor="#fa436a" :name="1" label="%"></u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item label="卡项概述" prop="description">
					<u-input v-model="formData.description" border="none" placeholder="建议输入12字以内" inputAlign="right">
					</u-input>
				</u-form-item>
				<!-- <u-form-item label="详细说明" prop="contentBody" labelPosition="top">
					<view class="mt-20">
						<u-textarea v-model="formData.contentBody" placeholder="请输入该步骤说明( 换行用 / 间隔 )"></u-textarea>
					</view>
				</u-form-item> -->
			</u-form>
		</view>
		<view class="pro-box">
			<view class="seims">服务项</view>
			<view class="pro-list" v-for="(im, ix) in formData.items" :key="im.projectId">
				<u-form-item borderBottom>
					<view class="flex justify-between">
						<text>{{im.projectObj.name}}</text>
						<view class="delBtn" @click="onDel(im.projectId)">删除</view>
					</view>
				</u-form-item>
				<u-form-item label="次数" labelWidth="65" borderBottom>
					<u-input v-model="im.times" type="number" border="none" placeholder="请输入数字" inputAlign="right"></u-input>
				</u-form-item>
				<u-form-item label="手工提成" labelWidth="65">
					<view class="flex">
						<view class="">
							<u-input v-model="im.manualPercentage" type="number" border="none" placeholder="请输入数字"
								inputAlign="right"></u-input>
						</view>
						<u-radio-group v-model="im.manualPercentageType" placement="row">
							<u-radio activeColor="#fa436a" :name="2" label="元"></u-radio>
							<u-radio activeColor="#fa436a" :name="1" label="%"></u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
			</view>
		</view>
		<view class="addBtn">
			<u-gap height="1" bgColor="#fa436a"></u-gap>
			<view class="pt-20" @click="topro">添加项目</view>
		</view>
		<u-gap height="80"></u-gap>
		<view class="bottom-button">
			<u-button type="primary" size="large" color="#fa436a" text="保存" @click="onSubmit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				fileList: [],
				formData: {
					contentBody: "<p>手机端</p>",
					description: "",
					name: "",
					purpose: 1,
					salePercentage: 0,
					salePercentageType: 2,
					salePrice: 0,
					shareImageUrl: "",
					status: 0,
					storeId: "",
					validDays: 0,
					attributes: [],
					items: []
				},
				rules: {
					name: [{
						required: true,
						message: '请输入项目名称',
						trigger: ['change', 'blur']
					}]
				}
			}
		},
		onLoad(option) {
			let that = this
			if (option.id) {
				uni.setNavigationBarTitle({
					title: "编辑项目",
				})
				this.isEdit = true
				this.getEdit(option.id)
			} else {
				uni.setNavigationBarTitle({
					title: "新增项目"
				})
				this.isEdit = false
			}
			uni.$on('event-pros', (data)=>{
				if(that.formData.items.length>0){
					that.formData.items = data.map(im=>{
						const found = that.formData.items.find(obj => obj.projectId === im.projectId)
						return found ? Object.assign({}, found, im) : im
					})
				}else {
					that.formData.items = data
				}
			})
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			topro(){
				uni.navigateTo({
					url:'/pages/selectPage/project?items='+ JSON.stringify(this.formData.items)
				})
			},
			getEdit(id) {
				let that = this
				this.$reqJsonPost('ProjectCategoryGetEdit', {
					id: id
				}).then(res => {
					this.formData = {
						...res.data.model,
						attributes: res.data.attributes,
						items: res.data.items
					}
					this.fileList.push({
						url: res.data.model.shareImageUrl
					})
				})
			},
			// 删除项目
			onDel(id){
				this.formData.items = this.formData.items.filter(im=>im.projectId !== id)
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.formData.image = ''
			},
			onSubmit() {
				this.$refs.form.validate().then(res => {
					if (this.isEdit) {
						this.$reqJsonPost('ProjectCategoryDoEdit', {
							...this.formData,
						}).then(res => {
							uni.redirectTo({
								url:'/pages/project/card/list'
							})
						})
					} else {
						this.$reqJsonPost('ProjectCategoryDoCreate', {
							project: this.formData,
							goods: [],
							value: []
						}).then(res => {
							uni.redirectTo({
								url:'/pages/project/card/list'
							})
						})
					}
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$reqUpLoad(lists[i].url)
					let item = this.fileList[fileListLen]
					this.formData.image = result.fileUrl
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fileUrl
					}))
					fileListLen++
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-body {
		padding: 20rpx 20rpx 0 20rpx;
		background-color: #fff;
	}

	.pro-box {
		.seims {
			font-size: 28rpx;
			padding: 20rpx;
			color: #999;
		}

		.pro-list {
			padding: 0 20rpx;
			margin-bottom: 8rpx;
			background-color: #fff;
			.delBtn {
				border: 1px #fa436a solid;
				color: #fa436a;
				font-size: 22rpx;
				padding: 0 20rpx;
				border-radius: 6rpx;
			}
		}
	}
	.addBtn {
		background-color: #fff;
		padding:0 20rpx 20rpx 20rpx;
		text-align: center;
		color: #fa436a;
		font-size: 28rpx;
		font-weight: 600;
	}
</style>
